<template>
  <div class="auth_container">
    <view class="form_container">
      <van-cell-group inset>

        <van-cell
          title="商家身份"
          use-label-slot
          title-class="theme_color"
        >
          <van-radio-group
            direction="horizontal"
            slot="label"
            @change="onTypeChange"
            :value="userinfo.type"
          :disabled="userinfo.status === 1 || userinfo.status === 2"

          >
            <van-radio :name="1">个人</van-radio>
            <van-radio :name="2">企业</van-radio>
          </van-radio-group>

        </van-cell>

      </van-cell-group>

      <!--   个人认证   -->
      <van-cell-group v-if="userinfo.type===1" inset>


        <van-field
          :value="userinfo.auth_name"
          placeholder="请输入用户名"
          label="姓名"
          label-class="theme_color"
          @input="onAuthNameInput"

          :disabled="userinfo.status === 1 || userinfo.status === 2"
        />
        <van-field
          :value="userinfo.auth_number"

          label="身份证号码"
          placeholder="请输入身份证号码"
          autosize
          label-class="theme_color"
          maxlength="18"
          @input="onAuthNumberInput"
          :disabled="userinfo.status === 1 || userinfo.status === 2"


        />


        <van-cell
          title="身份证照片（正面）"
          use-label-slot
          title-class="theme_color"
        >
          <van-image width="100%" height="200" slot="label" @click="onUploadImg('front_id_card')"
                     :src="userinfo.front_id_card"/>
        </van-cell>


        <van-cell
          title="身份证照片（反面）"
          use-label-slot
          title-class="theme_color"
        >
          <van-image width="100%" height="200" slot="label" @click="onUploadImg('back_id_card')"
                     :src="userinfo.back_id_card"/>
        </van-cell>


        <van-cell
          title="机动车驾驶证"
          use-label-slot
          title-class="theme_color"
        >
          <van-image width="100%" height="200" slot="label" @click="onUploadImg('driver_license')"
                     :src="userinfo.driver_license"/>
        </van-cell>


        <van-cell
          title="认证时间"
          :label="userinfo.auth_time"
        >
        </van-cell>

        <view class="bottom">
          <view class="verify_button" @click="formSubmit" v-if="userinfo.status === 0 || userinfo.status === 3">提交资料</view>
          <view class="verify_button" v-else>{{ verifyStatus[userinfo.status] }}</view>
        </view>


        <van-cell>
          <view class="bottom_tips">
            <view class="tip_item">
              *请注意，一但提交，则无法进行变更，如有特殊需求请联系我们
            </view>
            <view class="tip_item">
              *您的信息仅供平台认证审核使用，我们将严格保密，审核通过周期为24小时
            </view>
          </view>
        </van-cell>
      </van-cell-group>

      <!-- 企业认证 -->
      <van-cell-group v-else inset>

        <van-field
          :value="userinfo.auth_name"
          placeholder="请输入企业名称"
          label="企业名称"
          label-class="theme_color"
          @input="onAuthNameInput"
        />

        <van-field
          :value="userinfo.auth_number"

          label="企业代码"
          placeholder="请输入企业代码"
          autosize
          label-class="theme_color"
          @input="onAuthNumberInput"
        />


        <van-cell
          title="营业执照"
          use-label-slot
          title-class="theme_color"
        >
          <van-image width="100%" height="200" slot="label" @click="onUploadImg('business_license')"
                     :src="userinfo.business_license"/>
        </van-cell>


        <van-cell
          title="认证时间"
          :label="userinfo.auth_time"
        >
        </van-cell>

        <view class="bottom">

          <view class="verify_button" @click="formSubmit" v-if="userinfo.status === 0 || userinfo.status === 3">提交资料</view>
          <view class="verify_button" v-else>{{ verifyStatus[userinfo.status] }}</view>
        </view>


        <van-cell>
          <view class="bottom_tips">
            <view class="tip_item">
              *请注意，一但提交，则无法进行变更，如有特殊需求请联系我们
            </view>
            <view class="tip_item">
              *您的信息仅供平台认证审核使用，我们将严格保密，审核通过周期为24小时
            </view>
          </view>
        </van-cell>
      </van-cell-group>

    </view>
    <view class="safeBottom"></view>
  </div>
</template>

<script>
import {doResponse, uploadImg} from "../../../requests/tools";
import {addAuthorization, getAuth} from "../../../requests/merchant/auth";

var $this;
export default {
  name: "uc_container",
  components: {},
  data() {
    return {
      userinfo: {

        type: 1,
        auth_name: "",
        auth_number: "",
        front_id_card: "",
        back_id_card: "",
        driver_license: "",
        business_license: "",
        auth_time: 0,
        status:0,

      },
      orderInfo: {
        wait: 2,
        running: 0,
        finished: 0,
      },
      tmpl_img: "",
      verifyStatus: ["未认证", "审核中", "已认证", "认证失败"]
    };
  },
  methods: {
    initPage(timestamp) {
      let date = new Date();
      if (timestamp){
        date = new Date(timestamp)
      }

      const year = date.getFullYear(); // 获取年份
      const month = date.getMonth() + 1; // 获取月份（注意：月份从 0 开始，所以要加 1）
      const day = date.getDate(); // 获取日期
      const hours = date.getHours(); // 获取小时
      const minutes = date.getMinutes(); // 获取分钟

      $this.userinfo.auth_time = `${year}-${month}-${day} ${hours}:${minutes}`;


    },
    /**
     * 营业执照上传
     * @param event
     */
    onUploadImg(event) {
      if ($this.userinfo.status === 1 || $this.userinfo.status === 2) {
        return false
      }

      uploadImg($this);
      let intv = setInterval(() => {
        if ($this.tmpl_img) {
          $this.userinfo[event] = $this.tmpl_img;
          $this.tmpl_img = "";
          clearInterval(intv)
        }
      }, 1000)
    },
    onTypeChange(e) {
      $this.userinfo.type = e.mp.detail;
    },
    /**
     * 输入框输入
     * @param event
     */
    onAuthNameInput(event) {
      $this.userinfo.auth_name = event.mp.detail;
    },

    onAuthNumberInput(event) {
      $this.userinfo.auth_number = event.mp.detail;
    },
    /**
     * 表单调整
     */
    formSubmit() {
      addAuthorization($this.userinfo).then(res => {
        doResponse(res)
      })
    }
  },
  created() {
    $this = this;
  },
  onLoad(params) {
    if (isNaN(params.status)) {// 已提交审核
      getAuth(params.auth_id).then(res => {
        $this.userinfo = res.data;
        $this.initPage($this.userinfo.auth_time * 1000)
      })
    }

  },
  onShow() {
    $this.initPage();
  }
};
</script>

<style>
.theme_color {
  color: #586ba9 !important;
  font-weight: bold;
}
</style>
<style scoped>
@import "index.css";
</style>
